<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="toy">子给的玩具: {{ toy }}</h4>
    <!-- 给子组件Child绑定自定义事件 -->
    <Child @send-toy="saveToy" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue'
let toy = ref('')
// 自定义事件：子 --> 父
function saveToy(value: string) {
  console.log('saveToy', value)
  toy.value = value
}
</script>

<style scoped>
.father {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
</style>
